// 单行省略号
@mixin line-ell($width) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    max-width: $width;
}

// 多行省略号
@mixin block-ell($number) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $number;
    display: -moz-box;
    -moz-line-clamp: $number !important;
    -moz-box-orient: vertical;
    overflow: hidden;
}

// 滚动条
@mixin scroll-bar($width: 10px, $height:10px) {
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #ffffff;
    }
    &::-webkit-scrollbar {
        width: $width;
        height: $height;
        background-color: #ffffff;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.2);
    }
}

// 按照设计图比例100%还原,在不同分辨率下设置html的font-size
@mixin html-css($device-width) {
    html {
        $x: $device-width / $refer-width;
        font-size: $html-font-size * $x
    }
}

@mixin computer-html-font-size() {
    $first-width: nth($device-width, 1);
    @media screen and (max-width: $first-width) {
        @include html-css($first-width);
    }
    @for $i from 1 to length($device-width) {
        $min-width: nth($device-width, $i);
        $max-width: nth($device-width, $i + 1);
        @media screen and (max-width: $max-width) and (min-width: $min-width) {
            @include html-css($max-width);
        }
    }
    $last-width: nth($device-width, length($device-width));
    @media screen and (min-width: $last-width) {
        @include html-css($last-width);
    }
}

// margin,padding
$types: (mar:margin, pad:padding);
$directions: (top:top, bot:bottom, lef:left, rig:right);
$sizes: (10px, 20px, 30px, 40px);
@mixin distance() {
    @each $type,
    $type-value in $types {
        @each $dir,
        $dir-value in $directions {
            @each $size in $sizes {
                .#{$type}-#{$dir}-#{$size} {
                    #{$type-value}-#{$dir-value}: computer($size);
                }
            }
        }
    }
}

// 字体
@mixin font-size() {
    @each $size in $font-sizes {
        .font#{$size} {
            font-size: computer($size);
        }
    }
}

@mixin unselecText {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

// 已提交状态颜色
$submitStatus: rgb(2, 197, 131);
// 未提交状态颜色
$noSubmitStatus: rgb(153, 153, 153);
// 状态球
@mixin status-ball {
    content: " ";
    display: block;
    width: computer(10px);
    height: computer(10px);
    position: absolute;
    border-radius: 50%;
}